<template>
  <div>
    <el-dialog
      title="用户详情"
      :visible.sync="isVisible"
      :before-close="closeDetail"
      width="30%"
    >
      <el-descriptions
        class="margin-top"
        :column="3"
      >

      <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-mobile-phone"></i>
            ID
          </template>
          {{ userInfo.id }}
        </el-descriptions-item>

        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-user"></i>
            用户名
          </template>
          {{userInfo.name}}
        </el-descriptions-item>

        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-user"></i>
            密码
          </template>
          {{userInfo.password}}
        </el-descriptions-item>
      </el-descriptions>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "UserDetail",
  data() {
    return {
      isVisible: false,
    };
  },
  props: ["visible", "closeDetail", "userInfo"],
  watch: {
    visible(val) {
      this.isVisible = val;
    },
  },
};
</script>